
import React from 'react'
import { useLocation, useParams } from "react-router-dom"
import qs from "qs"
import { log } from '@craco/craco/lib/logger';

export default function Music() {

  /* 
  useLocation:可以获取当前的路由地址信息
    - path：当前的路由地址
    - search：查询字符串形式的路由传参
    
 
*/
  const location = useLocation()
  console.log(location, "Music");
  const { user } = qs.parse(location.search.split("?")[1])
  const musicList = location.state
  //使用useParams传参
  console.log(useParams());
  const { id } = useParams()
  // console.log(musicList);
  return (
    <div>
      <h1>Music</h1>
      <p>我的用户名是:{user} 编号是:{id}</p>
      <ul>
        {

          musicList.map(item => {
            return <li key={item.id}>{item.name}</li>
          })
        }
      </ul>
    </div>
  )
}
